<template>
	<view class="msg-item" @click="itemClick">
		<view class="msg-tag" v-if="msgItem.pushType=='0'">答疑消息</view>
		<view class="msg-tag" v-if="msgItem.pushType=='1'">推送消息</view>
		<view class="msg-tag" v-if="msgItem.pushType=='2'">系统消息</view>
		<view class="msg-content">{{msgItem.content}}</view>
		<view class="msg-time">{{msgItem.sendTime}}</view>
		<view v-if='msgItem.isRead=="0"' class="msg-red-pot"></view>
	</view>
</template>

<script>
	export default {
		props: {
			msgItem: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		methods:{
			itemClick(){
				this.$emit('itemClick');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg {
		&-item {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #333333;
			padding: 30upx 0;
			border-bottom: 2upx solid #F1F1F1;
		}

		&-tag {
			width: 120upx;
			height: 46upx;
			line-height: 46upx;
			border-radius: 23upx;
			color: #FFFFFF;
			font-size: 20upx;
			background-color: #007AFF;
			text-align: center;
		}

		&-content {
			flex: 1;
			padding: 0 20upx;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}

		&-time {
			color: #999999;
			font-size: 14upx;
			z-index: 10;
		}
		
		&-red-pot{
			width: 12upx;
			height: 12upx;
			background-color: red;
			border-radius: 10upx;
			margin-left: 10upx;
		}
	}
</style>
